<template>
	<div id="forgetPwd-app">
		<div class="login-info">
			<p>找回密码</p>

			<ul>
				<li>
					<input type="text" placeholder="手机号" />
				</li>
				<li>
					<input type="number" placeholder="请输入短信验证码" />
				</li>
				<li>
					<input type="password" placeholder="请输入密码" />
				</li>
				<li>
					<input type="password" placeholder="请输入确认密码" />
				</li>
			</ul>
			<p style="padding-bottom: 2rem;"><button class="btn">重置密码</button></p>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from "@/components/common/_footer.vue"
	export default {
		data() {
			return {}
		},
		components: {
			Footer
		},
		beforeCreate: function() {
			{
				document.body.style.backgroundColor = "#f4f4f4";
			}
		}	    ,mounted:function(){
			document.querySelector("#menu").querySelectorAll("a")[3].classList.add("router-link-exact-active");
			
		}
	}
</script>

<style scoped>
	#login-app {
		/* background-color: #; */
	}

	.login-info {
		display: block;
		margin: 2rem auto;
		background-color: white;
		width: 90vw;
		border-radius: .5rem;
	}

	.login-info p {
		text-align: center;
		font-size: 2rem;
		color: #777;
		padding-top: 1rem;
	}

	.login-info li {
		margin: 1rem;
		border-bottom: 1px solid #e3e3e3;
		padding: 1rem 0;
	}

	.login-info li input {
		font-size: 1.6rem;
		width: 100%;
	}

	.login-info button {
		background-color: #FD482C;
		color: white;
		font-size: 1.8rem;
		text-align: center;
		display: block;
		width: 80vw;
		margin: auto;
		border: none;
		border-radius: 0;
		padding: .5rem 0;
		margin-bottom: 1rem;
	}
</style>
